<template>
	<view>
	 <topic-info :info ="info" ></topic-info>
		<divider></divider>
		
	<view class="p-2 flex align-center border-bottom " hover-class="bg-light" 
	 v-for="(item , index) in hotList" :key ="index">
		<text class="iconfont icon-jiatingjuhui text-main" ></text>
		<text class="font-md text-dark text-ellipsis " >{{item.title}}		
		</text>
	</view>
	<divider></divider>
	
	   <!-- tab -->
	   <view class="flex align-center py-2 " >
		   <view class="flex-1  flex align-center justify-center " 
		  v-for="(item,index) in tabBars" :key="index" :class="index ===  tabIndex? 
		  'font-lg font-weight-bold text-main':'font-md'" @click="changeTab(index)" >{{item.name}}</view>
		   
	   </view>   
	   <!-- 列表 -->
  <template v-if="listData.length > 0 " >
	 <block v-for="(item,index) in listData" :key="index" >
		<common-list :item="item" :index="index" ></common-list>
		<divider></divider>
	 </block>
	</template>
	<template v-else >
		<no-thing></no-thing>
	</template>
	 <!-- 上拉加载 -->
	 <load-more :loadmore ="loadtext" ></load-more>
	</view>
</template>

<script>
	const demo =[{
						  userpic:'/static/default.jpg',
						  username:'昵称',
						  usertime:'2019-10-20 下午04:30',
						   isFollow:false,
						  txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
						  txt_pic:'/static/demo/datapic/11.jpg'
							    	
						},{
							userpic:'/static/default.jpg',
							username:'昵称',
							usertime:'2019-10-20 下午04:30',
							txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
							txt_pic:'/static/demo/datapic/12.jpg'
						},{
							userpic:'/static/default.jpg',
							username:'昵称',
							usertime:'2019-10-20 下午04:30',
							isFollow:false,
							txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
							txt_pic:'/static/demo/datapic/13.jpg'
						},{
							userpic:'/static/default.jpg',
							username:'昵称',
							usertime:'2019-10-20 下午04:30',
							isFollow:false,
							txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
							txt_pic:'/static/demo/datapic/14.jpg'
						}]
		import topicInfo from '@/components/topic-detail/topic-info.vue'
		import commonList from '@/components/common/common_list.vue'
		import noThing from '@/components/common/no-thing.vue'
		import loadMore from '@/components/common/load_more.vue'
	export default {
		components:{
			topicInfo,
			commonList,
			noThing,
			loadMore
		},
		data() {
			return {
			  info:{
				  cover:"/static/demo/topicpic/1.jpeg",
				  title:"话题名称",
				  desc:"话题描述",
				  today_count:0,
				  news_count:10
			  },
			  hotList:[{
				  title:"【新人必读】uni-app实战第二季商城类项目开发",
				  
			  },
			  {
				  title:"【新人必读】uni-app实战第三季仿微信项目开发",
				  
			  }],
			  
			  tabIndex:0,
			  tabBars:[{
				  name:"默认"
			  },
			  {
			  				  name:"最新"
			  }],
			 /* 默认列表 */
			  list1:[],
			  loadtext1:"上拉加载更多",
			/*  最新列表 */
			  list2:[],
			  loadtext2:"上拉加载更多"
			}	
			
		},
		computed:{
			//return this['list' + this.tabIndex+1]
			listData(){
				if(this.tabIndex === 0){
					return this.list1
				}
				return this.list2
			},
			//当前上拉加载
			loadtext(){
				if(this.tabIndex === 0){
					return this.loadtext1
				}
				return this.loadtext2
			}
		},
		onLoad(e){
			if (e.detail){
				let res = JSON.parse(e.detail)
				console.log(res)
			}
			this.list1 = demo
		},
		//触底事件
		onReachBottom(){
			this.loadMore()
		},
		
		methods: {
			//tab切换
			changeTab(index){
				this.tabIndex = index
			},
			loadMore(){
				//拿到当前的列表
				let index = this.tabIndex
				//是否处于可加载状态
				if (this.loadtext !== '上拉加载更多') return;
				//设置上拉加载状态处于加载中...
				this['loadtext'+(this.tabIndex+1)] = '加载中...'
			    //请求数据
				setTimeout(()=>{
					this['list'+(this.tabIndex+1)] = [...this['list'+(this.tabIndex+1)],...this['list'+(this.tabIndex+1)]]
				this['loadtext'+(this.tabIndex+1)] = '加载中...'
				},2000)
			}
			
		}
	}
</script>

<style>
 .filter{
	 filter: blur(10px);
 }
</style>
